<template>
<section class="jumbotron">
  <h3 class="jumbotron-heading">Search Github Users</h3>
  <div>
    <input type="text" placeholder="enter the name you searrch" v-model="keyWord">&nbsp;
    <button @click="getUsers">Search</button>
  </div>
</section>
</template>

<script>
import axios from 'axios'
export default {
  name: "Search",
  data() {
    return {
      keyWord: ''
    }
  },
  methods: {
    getUsers() {
      this.$bus.$emit('updateListData', {isLoading: true, errMsg:'',users:[],isFirst:false})
      //ajax实现
      //axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
      //vue-resource实现
      this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
        response => {
          console.log('请求成功了')
          //请求成功后更新List的数据
          this.$bus.$emit('updateListData', {isLoading:false, errMsg:'', users:response.data.items})
        },
        error => {
          //请求后更新List数据
          this.$bus.$emit('updateListData', {isLoading:false, errMsg: error.message, users:[]})
        }
      )
    }
  }
}
</script>

<style scoped>

</style>
